<template>
	<view class="avatar-popup">
		<u-popup
			v-model="show"
			mode="center"
      :closeable="true"
			border-radius="16"
			width="620"
			@close="close">
			<view class="popup-content1">
        <view class="nav-container">
          <view
            v-if="usedWriterGuideList.length > 0"
            class="btn-item"
            :class="{
              'active-item': currentUsed === 'writer'
            }"
            @click.native="currentUsed = 'writer'">文案示意</view>
            <view
            v-if="bgUsageGuide"
            class="btn-item"
            :class="{
              'active-item': currentUsed === 'bg'
            }"
            @click.native="currentUsed = 'bg'">背景示意</view>
        </view>
				<u-swiper
          v-if="currentUsed === 'writer' && usedWriterGuideList.length > 0"
          :list="usedWriterGuideList"
          mode="dot"
          :height="300"
          :border-radius="8"
          :interval="5000"></u-swiper>
        <image
          v-if="currentUsed === 'bg' && bgUsageGuide"
          :src="bgUsageGuide"
          mode="aspectFit"
          style="width: 100%;height: 294rpx;border-radius: 16rpx;"
        />
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		props: {
			'popupShow': {
				default: false,
			},
			'info': {
				type: Object,
				default: () => {
          return {}
        }
			}
		},
		data(){
			return{
        currentUsed: 'writer',
				show: this.popupShow,
        usedWriterGuideList: [],
        bgUsageGuide: '',
			}
		},
    watch: {
			popupShow: {
				immediate: true,
				handler(val, oldValue) {
					this.show = val;
				}
			},
      info: {
				immediate: true,
				handler(val, oldValue) {
					if (val) {
            this.bgUsageGuide = val.bg_usage_guide;
            this.usedWriterGuideList = val.dy_usage_guide;
            if (val.bg_usage_guide) {
              this.currentUsed = 'bg';
            } else {
              this.currentUsed = 'writer';
            }
          }
				}
			},
		},
		methods: {
      // 关闭弹窗
			close(){
				this.$emit('close', false);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.popup-content1{
		padding: 24rpx;
		background-color: #fff;
		color: #fff;
    position: relative;
    text-align: center;

    .nav-container{
      display: flex;
      padding-bottom: 24rpx;

      .btn-item{
        margin-right: 12rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        font-weight: 500;
        color: #a2a0a8;
        padding: 18rpx;
        border-radius: 12rpx;
        background: #f5f6f8;
      }

      .active-item{
        background-color: #f3f7fb;
        color: $uni-color-primary;
      }
    }
	}
</style>
